<template>
  <div class="content_box">
    <img class="logo" src="https://tpp-admin.oss-cn-beijing.aliyuncs.com/rich/20231224/9zPeY1zWATxXrPkEmX5V.jpg" alt="">
    <!-- <div class="lanmu_box">
      <van-tabs 
        title-active-color="#1E68FF" 
        color="#1E68FF" 
        v-model="active" 
        bind:change="onChange"
        line-width="20px"
      >
        <van-tab title="商家"></van-tab>
        <van-tab title="合伙人"></van-tab>
        <van-tab title="员工"></van-tab>
        <van-tab></van-tab>
        <van-tab></van-tab>
      </van-tabs>
      <p class="line"></p>
    </div> -->
    <div class="nr">
      <div class="input">
        <img class="left_icon" src="/static/images/user.png" alt="">
        <input v-model.trim="loginForm.loginName" type="text" placeholder="请输入账号" placeholder-style="color:#aaa;">
        <p class="right close" v-if="loginForm.loginName" @click="closeUser">
          <van-icon name="cross" />
        </p>
      </div>
      <div class="input">
        <img class="left_icon" src="/static/images/pass.png" alt="">
        <input v-if="isEye" v-model.trim="loginForm.password" type="password" placeholder="请输入密码" placeholder-style="color:#aaa;">
        <input v-else v-model.trim="loginForm.password" type="text'" placeholder="请输入密码" placeholder-style="color:#aaa;">
        <p class="right eye">
          <img @click="clickEye(false)" v-if="isEye" src="/static/images/eye1.png" alt="">
          <img @click="clickEye(true)" v-else src="/static/images/eye2.png" alt="">
        </p>
      </div>
      <!-- <p class="wj_pass" @click="toPass">忘记密码?</p> -->
      <van-button 
        @click="submit"
        :disabled="loading"
        :loading="loading" 
        loading-text="登录中..."
        type="primary"
        color="#3d98f7"
        custom-style="margin-top:40rpx;box-shadow: 0rpx 10rpx 20rpx #CEDBFA;border:none;width: 100%;height: 88rpx;line-height: 88rpx;background: #1E68FF;border-radius: 100rpx;text-align: center;color: #fff;font-size: 30rpx;"
      >登 录</van-button>
    </div>
    <!-- <p class="kj">
      <img src="/static/images/wx.png" alt="">
    </p> -->
  </div>
</template>
 
<script>

import { getToken,setRole,getRole } from "@/utils/auth";
export default {
  components: {
  },
  data() {
    return{
      loading:false,
      loginForm:{
        loginName:'',
        password:'',
      },
      isEye:true,
      msg:{}
    }
  },
  onShow() {
    this.loading = false
    if(getToken()){
      if(getRole() == 'admin'){
        wx.switchTab({
          url: `/pages/home/main`,
        });
      }else{
        wx.navigateTo({
          url: `/pages/home/clearAdmin/main?storeId=${this.msg.storeId}`,
        });
      }
      
    }
  },
  methods: {

    // 跳转忘记密码
    toPass(){
      wx.navigateTo({
        url: `/pages/login/forgot_pass/main`,
      });
    },

    // 清空用户名
    closeUser(){
      this.loginForm.loginName = ''
    },

    // 查看密码
    clickEye(state){
      console.log(state)
      this.isEye = state
    },

    // 登录
    submit(){
      if(!this.loginForm.loginName){
        this.$toast('请输入用户名')
        return
      }
      if(!this.loginForm.password){
        this.$toast('请输入密码')
        return
      }
      this.loading = true
      this.$showLoading('登录中...')
      wx.login({
        success:(res)=>{
          let code = res.code
          console.log(code)
          let data = {
            code,
            device:'APPLETS',
            loginName:this.loginForm.loginName,
            password:this.loginForm.password,
          }

          this.$store.dispatch("userLogin", data).then(res=>{
            if(res.statusCode == '00000'){
              setRole(res.data.roles[0])
              this.msg = res.data
              // 管理员
              if(getRole() == 'admin'){
                // this.loading = false
                if(!res.data.storeId){
                  wx.hideLoading()
                  wx.showModal({
                    title: "温馨提示",
                    content: "你还没有店铺哦，赶快去创建一个吧！",
                    confirmText:'去创建',
                    showCancel: false,
                    success: function (res) {
                      if (res.confirm) {
                        wx.navigateTo({
                          url: `/pages/addStore/main?isEdit=0`,
                        });
                      }
                    },
                  });
                }else{
                  wx.hideLoading()
                  this.$toast('登录成功')
                  setTimeout(() => {
                    wx.switchTab({
                      url: `/pages/home/main`,
                    });
                  }, 1000);
                }
              }else{// 打扫
                wx.hideLoading()
                this.$toast('登录成功')
                setTimeout(() => {
                  wx.navigateTo({
                    url: `/pages/home/clearAdmin/main?storeId=${res.data.storeId}`,
                  });
                }, 1000);
              }
              
            }else{
              wx.hideLoading()
              this.$toast(res.message)
              this.loading = false
            }
          }).catch(err=>{
            wx.hideLoading()
            this.$toast("系统错误，请稍后重试")
            this.loading = false
          })
        }
      })
    }
  },
  onHide() {},
  onLoad() {
    
  },
  onUnload() {
  },
  onShareAppMessage() {
    return {
      title: '应许之地商家端',
      path: `/pages/login/main`,
    }
  },
  created() {}
};
</script>

<style lang="scss" scoped>

.content_box{
  .logo{
    display: block;
    width: 480rpx;
    height: 120rpx;
    border-radius: 20rpx;
    margin:100rpx auto 100rpx auto;
  }
  .lanmu_box{
    margin:0 auto;
    margin-bottom:80rpx;
    .line{
      width: 78%;
      height: 2rpx;
      background: #f5f5f5;
      margin:0 auto;
    }
    /deep/ .van-tab{
      font-weight: 500;
      font-size:28rpx;
    }
    /deep/ .van-tab--active{
      font-size:32rpx;
    }
  }
  .top{
    width: 86%;
    margin:50rpx auto 100rpx auto;
    display: flex;
    .text{
      font-size:40rpx;
      font-weight: 500;
      span{
        color:#1D69FE;
      }
    }
    .label{
      padding:0 10rpx;
      background: #aaa;
      font-size:24rpx;
      height: 36rpx;
      line-height: 36rpx;
      margin-left:20rpx;
    }
  }
  .nr{
    width: 86%;
    margin:0 auto;
    
    .input{
      height: 88rpx;
      border-bottom:1px solid #f5f5f5;
      display: flex;
      align-items: center;
      margin-bottom:20rpx;
      background: #F6F4FE;
      border-radius: 50rpx;
      padding:0 30rpx;
      .left_icon{
        width: 34rpx;
        height: 34rpx;
        margin-right:20rpx;
      }
      .right{
        margin-left: auto;
      }
      input{
        font-size:30rpx;
        color:#222;
      }
      .close{
        width: 30rpx;
        height: 30rpx;
        background: #ccc;
        border-radius: 50%;
        color:#fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:18rpx;
      }
      .eye{
        img{
          width: 34rpx;
          height: 34rpx;
        }
      }
    }
    .wj_pass{
      font-size:28rpx;
      text-align: right;
      margin:30rpx 0 30rpx 0;
      color:#666;
    }
  }
  .kj{
    text-align: center;
    margin-top:100rpx;
    img{
      width: 60rpx;
      height: 60rpx;
    }
  }
}
</style>
